<template>
    <div id="app" class="layout">
        <Layout style="width: 100%; height: 100%;">
            <Sider ref="side1" hide-trigger collapsible collapsed-width="78" v-model="isCollapsed" class="sider" breakpoint="md">
                <Menu :active-name="activeName" theme="light" :class="menuitemClasses" @on-select="routeTo" width="auto">
                    <MenuItem name="/" to="/">
                        <Icon type="md-home"></Icon>
                        <span>主页</span>
                    </MenuItem>
                    <MenuItem name="/rsume" to="/rsume">
                        <Icon type="ios-paper" />
                        <span>简历</span>
                    </MenuItem>
                    <MenuItem name="/dynamic" to="/dynamic">
                        <Icon type="ios-chatbubbles" />
                        <span>动态</span>
                    </MenuItem>
                    <MenuItem name="/photo" to="/photo">
                        <Icon type="md-images" />
                        <span>照片</span>
                    </MenuItem>
                    <MenuItem name="/articlelist" to="/articlelist">
                        <Icon type="ios-book" />
                        <span>文章</span>
                    </MenuItem>
                    <MenuItem name="/speak" to="/speak">
                        <Icon type="md-create" />
                        <span>留言</span>
                    </MenuItem>
                    <MenuItem name="/user" to="/user">
                        <Icon type="md-contact" />
                        <span>我的</span>
                    </MenuItem>
                </Menu>
            </Sider>
            <Layout class="all_box">
                <Content class="content">
                    <Button
                            @click.native="collapsedSider"
                            shape="circle" :icon="btn_icon"
                            class="sider_btn">
                    </Button>
                    <router-view></router-view>
                    <copyright-box></copyright-box>
                </Content>
            </Layout>
        </Layout>
    </div>
</template>

<script>
    import CopyrightBox  from "@/components/CopyrightBox"
    export default {
        name: 'App',
        data() {
            return {
                activeName: this.$route.path,
                btn_icon: 'ios-arrow-forward',
                isCollapsed: true,
                if_login:'',
            }
        },
        components: {
            'copyright-box':CopyrightBox
        },
        computed: {
            rotateIcon() {
                return [
                    'menu-icon',
                    this.isCollapsed ? 'rotate-icon' : ''
                ];
            },
            menuitemClasses() {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        methods: {
            collapsedSider() {
                this.$refs.side1.toggleCollapse();
                if (this.btn_icon == 'ios-arrow-back') {
                    this.btn_icon = 'ios-arrow-forward';
                } else if (this.btn_icon == 'ios-arrow-forward') {
                    this.btn_icon = 'ios-arrow-back';
                }
            },
            routeTo(e) {
                this.activeName = e;
            },
            drag(ev){
                ev.dataTransfer.setData("Text",ev.target.id);
            },
        },
        mounted() {
            if(sessionStorage.getItem("userdata")){
                this.if_login=true;
                this.login_text='我的';
            }else{
                this.if_login=false;
                this.login_text='登录';
            }
        },
        watch: {
            $route(to, from) {
                this.activeName = to.path;
            },
        },
    }
</script>

<style scoped>
    .layout {
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
    .menu-item span {
        display: inline-block;
        overflow: hidden;
        width: auto;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i {
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 22px;
    }
    .collapsed-menu span {
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i {
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
    .content {
        margin: 0px;
        background: #fff;
        height: auto;
    }
    .sider {
        z-index: 999;
        height: 100%;
        background: #fff;
        border-right: 1px solid #e0e0e0;
        position: fixed;
    }
    .sider_btn{
        z-index:1000;
        position: fixed;
        bottom: 15px;
        right: 0;
        left: 0;
        margin: auto auto;
        width: 60px !important;
        height: 60px !important;
        font-size: 40px !important;
        line-height: 60px !important;
        background:rgba(255,255,255,0.8) !important;
    }
</style>
